<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a4j="http://richfaces.org/a4j"
	 xmlns:rich="http://richfaces.org/rich"
	template="/layout/template.xhtml">

	<ui:define name="pageLayout">
	
		<ui:decorate template="/layout/boxed.xhtml">
			<ui:param name="toplevel" value="true" />
			<ui:param name="bordered" value="true" />
			
					<a4j:outputPanel id="myContentsPanel">
			<a4j:form>
				<div>
					<script>
						function spinnerWatingShow() {
							var pdfpreview = document.getElementById("spinnerWating");
							if (pdfpreview) {pdfpreview.style.display = 'inline';}
						}
					</script>
					<a4j:jsFunction name="updateContentsPanel" reRender="myContentsPanel"/>
					<h:selectOneMenu value="#{mycontents.selectedResources}">
						<f:selectItems value="#{mycontents.resources}"/>
						<a4j:support event="onchange" action="#{mycontents.changeSelectedResources()}" reRender="myContentsPanel"
								onsubmit="spinnerWatingShow();"/>
					</h:selectOneMenu>
					<br />
					<h:selectOneMenu value="#{mycontents.selectedContentStatus}">
						<f:selectItems value="#{mycontents.contentStatuses}"/>
						<a4j:support event="onchange" action="#{mycontents.changeContentStatus()}" 
								onsubmit="spinnerWatingShow();" oncomplete="updateContentsPanel()"/>
					</h:selectOneMenu>
					<div id="spinnerWating" style="Display: none;">
						<h:graphicImage value="/img/spinner.gif"/>
					</div>
					<br />
					<h:inputText value="#{mycontents.selectedContent}"/>
					<h:commandButton value="#{messages['contents.my.search']}" action="#{mycontents.changeSelectedContent()}"/>
				</div>
				<hr/>
				<div>
					<ui:include src="mycontents.buttons.xhtml" >
					</ui:include>
					<div id="paging">
						rows #{mycontents.paging.currentPages} from #{mycontents.paging.allRows}
						<h:selectOneMenu value="#{mycontents.paging.lineOnPage}">
							<f:selectItems value="#{mycontents.paging.linesOnPage}"/>
							<a4j:support event="onchange" action="#{mycontents.changeContentStatus()}" 
									onsubmit="spinnerWatingShow();" oncomplete="updateContentsPanel()"/>
						</h:selectOneMenu>
					</div>
					<ui:include src="paging.xhtml" >
						<ui:param name="paging" value="#{mycontents.paging}" />
					</ui:include>
						<h:dataTable 
							id="contentsList"
							var="item"
							value="#{mycontents.contents}"
							styleClass="dataGrid"
							rowClasses="odd,even">
							
							<h:column>
								<f:facet name="header">
									<h:selectBooleanCheckbox value="#{mycontents.selectedAll}" >
										<a4j:support event="onchange" action="#{mycontents.checkSelectedAll()}" 
											reRender="myContentsPanel" onsubmit="spinnerWatingShow();"/>
									</h:selectBooleanCheckbox>
								</f:facet>
									<h:selectBooleanCheckbox value="#{item.select}" />
							</h:column>
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.title']}" />
								</f:facet>
									<ui:decorate template="/layout/displayContent.xhtml">
										<ui:param name="content" value="#{item}" />
									</ui:decorate>	
		<h:panelGrid styleClass="vertical-menu-cell" columnClasses="optionList" columns="1" cellspacing="0" cellpadding="0">
            <rich:dropDownMenu style="border:1px solid #{a4jSkin.panelBorderColor}" value="#{messages['search']}"
                        submitMode="none" direction="bottom-right" jointPoint="tr">
                <rich:menuItem value="#{messages['contents.search.byTitle']}"/>
                <rich:menuItem value="#{messages['contents.search.byArtist']}"/>
                <rich:menuItem value="#{messages['contents.search.byAlbum']}"/>
                <rich:menuItem value="#{messages['contents.search.byYear']}" />
            </rich:dropDownMenu>
         </h:panelGrid>   
							</h:column>
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.filename']}" />
								</f:facet>
									<span title="#{item.url}">
										<h:outputText value="#{item.filename}" />
									</span>
							</h:column>
							<h:column>
								<f:facet name="header">
									<h:outputText value="#{messages['contents.my.status']}" />
								</f:facet>
									<h:outputText value="#{item.status}" />
							</h:column>
							
						</h:dataTable>
					<ui:include src="mycontents.buttons.xhtml" >
					</ui:include>
				</div>
			</a4j:form>
					</a4j:outputPanel>
		</ui:decorate>

	</ui:define>

</ui:composition>